.box {
	padding: 24px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 12px 12px 12px 12px;
	opacity: 1;
	color: #1d2129;
	font-weight: 500;
}

.mt16 {
	margin-top: 16px !important;
}

.wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0;
}

.wrapper>.left {
	width: calc(100% - 460px);
}

.wrapper>.right {
	width: 460px;
	background: #FFFFFF;
}

.panel-cost {
	width: 100%;
	height: 236px;
	background: #165DFF;
	border-radius: 0;
	opacity: 1;
}

.plancost {
	height: calc(100% - 180px - 16px);
	background-color: #f2f3f5;
	padding: 0px;
}


.business-unit {
	width: 100%;
	height: calc(100% - 236px);
	background-color: #f2f3f5;
}

.panel-cost h3 {
	color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 24px;
	font-weight: 500;
}

.panel-cost h3 a span {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-left: 18px;
}

.costinfo {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.costinfo .number h6 {
	font-size: 16px;
	font-weight: normal;
	line-height: 34px;
	color: #1D2129;
}

.costinfo .number span {
	color: #1D2129;
	font-size: 28px;
	font-weight: 500;
	position: relative;
	top: 4px;
}

.costinfo .number {
	width: 120px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 70px;
}

.costinfo .number span b {
	font-size: 12px;
	font-weight: 400;
	color: #1D2129;
}

.costinfo .chart {
	width: calc(100% - 120px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 70px;
}

.costinfo .chart .desc {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.costinfo .chart .title,
.costinfo .chart .total {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.costinfo .chart .desc .cashname {
	font-size: 16px;
	font-weight: 400;
	color: #4E5969;
}

.costinfo .chart .desc .cash {
	font-size: 20px;
	font-weight: 500;
	color: #1D2129;
	margin: 0 5px 0 10px;
}

.costinfo .chart .desc .cash b,
.costinfo .chart .desc .unit {
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
	height: 18px;
	line-height: 28px;
}

.costinfo .chart .process {
	width: 100%;
	height: 16px;
	background: rgba(36, 202, 73, .2);
	display: flex;
	flex-direction: row;
	margin: 0;
}

.costinfo .chart .process .process-data {
	height: 16px;
	background: #24CA49;
	opacity: 1;
	width: 0;
	transition: width 2s;
	-webkit-transition: width 2s;
}


.costinfo .chart .process-flag {
	width: 2px;
	height: 28px;
	background: #24CA49;
	opacity: 1;
	position: relative;
	top: -6px;
	z-index: 10;
}

.vertical.costinfo .chart .process {
	background: rgba(114, 57, 234, .2);
}
.pre-research.costinfo .chart .process{
	background: rgba(255, 193, 7, .2);
}
.vertical.costinfo .chart .process .process-data,
.vertical.costinfo .chart .process-flag {
	background: #7239EA;
}
.pre-research.costinfo .chart .process .process-data,
.pre-research.costinfo .chart .process-flag {
	background: #FFC107;
}
#heng {
	margin-top: 20px;
	font-size: 20px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #2E2E3A
}

#zong , #yuyan{
	margin-top: 20px;
	font-size: 20px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #2E2E3A;
}

.panel-plan {
	background-color: #FFFFFF;
}

.panel-plan h3 {
	color: #1D2129;
}

.panel-cost.panel-plan h3 a span {
	color: #4E5969;
}

.deptyear,
.deptplan {
	height: calc((100% - 180px - 32px) / 2);
}

#chartPlanCost,
#chartTotalPlan,
#chartDeptPlan {
	width: 100%;
	margin-top: 20px;
	height: calc(100% - 60px);
}

.chartFormart {
	width: 250px;
	padding: 8px;
	border-radius: 6px;
	border: 1px solid #ffffff;
	box-shadow: 0 2px 5px 1px rgba(199, 211, 233, 0.83);
	background: -moz-linear-gradient(top, #f4f7fc 0%, #ffffff 100%);
	background: -webkit-gradient(linear,
			left top,
			left bottom,
			color-stop(0%, #f4f7fc),
			color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(top, #f4f7fc 0%, #ffffff 100%);
	background: -o-linear-gradient(top, #f4f7fc 0%, #ffffff 100%);
	background: -ms-linear-gradient(top, #f4f7fc 0%, #ffffff 100%);
	background: linear-gradient(to bottom, #f4f7fc 0%, #ffffff 100%);
}

.chartItemFormart {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 6px 0 20px 1px rgba(34, 87, 188, 0.1);
	padding: 6px 8px;
	margin-top: 4px;
}

/* //////////////////////////////////////////////////////////////////////////////// */
.esun-boxmin {
	width: calc((100% - 16px) * 0.242);
	height: 305px;
	position: relative;
	background-color: rgb(120, 72, 233);
	border-radius: 15px;
	float: left;
	margin-left: 14px;
}

.esun-boxmin:nth-child(1) {
	background-color: #165dff;
	margin-left: 0px;
}

.esun-boxmin:nth-child(2) {
	background-color: #50cd89;
}

.esun-boxmin:nth-child(3) {
	background-color: #ffc700;
}

.esun-boxmin:nth-child(4) {
	background-color: #7239ea;
}

.esun-boxmin:nth-child(5) {
	margin-top: 16px;
	background-color: #0fc6c2;
	margin-left: 0px;
}

.esun-boxmin:nth-child(6) {
	margin-top: 16px;
	background-color: #f1416c;
}

.esun-boxmin:nth-child(7) {
	margin-top: 16px;
	background-color: #b5bdcb;
}

.esun-boxmin .boxmincontent {
	position: relative;
	margin-top: 15px;
	width: 100%;
	height: 293px;
	background-color: rgb(255, 255, 255);
	border-radius: 0px 0px 15px 15px;
	padding-top: 14px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 24px;
}

.esun-boxmin .boxmincontent .contenttop {
	/* background-color: rgb(163, 34, 34); */
	height: 28px;
}

.esun-boxmin .boxmincontent .contenttop .topleft {
	/* background-color: rgb(30, 215, 221); */
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	font-size: 20px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #1d2129;
	float: left;
}

.esun-boxmin .boxmincontent .contenttop .topright {
	position: relative;
	/* background-color: rgb(215, 30, 221); */
	float: right;
	height: 28px;
	font-size: 20px;
	font-size: 0.8em;
	/*大小*/
	padding: 0.4em;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-top: 2px solid #4e5969;
	/*上面的线条*/
	border-right: 2px solid #4e5969;
	/*右边线条*/
	transform: rotate(45deg);
	/*主要是这个旋转45度*/
}

.esun-boxmin .boxmincontent .contenttop .topright span {
	position: absolute;
	display: inline-block;
	text-decoration: none;
	background-color: #4e5969;
	width: 12px;
	height: 2px;
	transform: rotate(-45deg);
	margin-top: -8px;
	top: 12px;
	left: -1px;
}

.esun-boxmin .boxmincontent .implementmoney {
	margin-top: 24px;
}

.esun-boxmin .boxmincontent .implementmoney span {
	font-size: 24px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	color: #1d2129;
}

.esun-boxmin .boxmincontent .implerate {
	margin-top: 10px;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #4e5969;
}

.esun-boxmin .boxmincontent .implerate span {
	font-size: 16px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	color: #1d2129;
}

.esun-boxmin .boxmincontent .implerate .ratestrip {
	position: relative;
	height: 12px;
	background-color: #004cff;
	margin-top: 9px;
	z-index: 100;
}

.esun-boxmin .boxmincontent .implerate .ratestripunder {
	position: relative;
	width: 100%;
	height: 12px;
	background-color: #e8f3ff;
	margin-top: -12px;
	/* color: #7d8083; */
}

.esun-boxmin .boxmincontent .themessage {
	width: 100%;
	height: 47px;
	/* background-color: rgb(241, 50, 50); */
	margin-top: 23px;
}

.esun-boxmin .boxmincontent .themessage .themessagedown {
	margin-top: 14px;
	/* background-color: rgb(39, 98, 133); */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.esun-boxmin .boxmincontent .themessage .themessagedown .downleft {
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #4e5969;
}

.esun-boxmin .boxmincontent .themessage .themessagedown .downright {
	font-size: 12px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #86909c;
}

.esun-boxmin .boxmincontent .themessage .themessagedown .downright span {
	font-size: 16px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	color: #1d2129;
}

/* /////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1600px) {
	.esun-boxmin {
		width: calc((100% - 16px) * 0.326);
	}

	.esun-boxmin:nth-child(4) {
		margin-top: 16px;
	}

	.esun-boxmin:nth-child(1) {
		background-color: #165dff;
		margin-left: 0px;
	}

	.esun-boxmin:nth-child(2) {
		background-color: #50cd89;
	}

	.esun-boxmin:nth-child(3) {
		background-color: #ffc700;
	}

	.esun-boxmin:nth-child(4) {
		background-color: #7239ea;
		margin-left: 0px;
	}

	.esun-boxmin:nth-child(5) {
		margin-top: 16px;
		background-color: #0fc6c2;
		margin-left: 16px;
	}

	.esun-boxmin:nth-child(6) {
		margin-top: 16px;
		background-color: #f1416c;
	}

	.esun-boxmin:nth-child(7) {
		margin-top: 16px;
		background-color: #b5bdcb;
	}
}

@media screen and (max-width: 1481px) {
	.esun-boxmin {
		width: calc((100%) * 0.495);
		margin-left: 0px;
		/* margin-bottom: 20px; */
	}

	.esun-boxmin:nth-child(1) {
		margin-right: 1%;
		/* margin-top: 16px; */
	}

	.esun-boxmin:nth-child(2) {
		/* margin-top: 16px; */
	}

	.esun-boxmin:nth-child(3) {
		margin-right: 1%;
		margin-top: 16px;
	}

	.esun-boxmin:nth-child(4) {
		margin-top: 16px;
	}

	.esun-boxmin:nth-child(5) {
		margin-right: 1%;
		margin-left: 0px;
	}

	.esun-boxmin:nth-child(7) {
		margin-right: 1%;
	}
}

@media screen and (max-width: 1400px) {
	.wrapper {
		overflow: auto;
	}

	.wrapper>.left {
		width: 100%;
		height: auto;
	}

	.wrapper>.right {
		width: 100%;
		height: auto;
	}

	.panel-plan {
		margin-top: 16px;
	}

	#chartPlanCost,
	#chartTotalPlan,
	#chartDeptPlan {
		width: 100%;
		margin-top: 20px;
		height: 400px;
	}

	.esun-boxmin {
		width: calc((100%) * 0.495);
		margin-left: 0px;
		/* margin-bottom: 20px; */
	}

	.esun-boxmin:nth-child(1) {
		margin-right: 1%;
		/* margin-top: 16px; */
	}

	.esun-boxmin:nth-child(2) {
		/* margin-top: 16px; */
	}

	.esun-boxmin:nth-child(3) {
		margin-right: 1%;
		margin-top: 16px;
	}

	.esun-boxmin:nth-child(4) {
		margin-top: 16px;
	}

	.esun-boxmin:nth-child(5) {
		margin-right: 1%;
	}

	.esun-boxmin:nth-child(7) {
		margin-right: 1%;
	}
}


.expenseInfo {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.expenseInfo .total {
	width: 30%;
}

.expenseInfo .total p {
	color: #FFFFFF;
	font-size: 20px;
	margin-bottom: 8px;
	font-weight: 400;
}

.expenseInfo .total h3 {
	color: #FFFFFF;
	font-size: 56px;
	font-weight: bold;
	align-items: baseline;
}

.expenseInfo .total h3 span {
	font-size: 16px;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.8);
}

.expenseInfo .details {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.expenseInfo .details p {
	color: #FFFFFF;
	font-size: 18px;
	margin-bottom: 8px;
	font-weight: 400;
}

.expenseInfo .details h5 {
	color: #FFFFFF;
	font-size: 32px;
	font-weight: 600;
}

.expenseInfo .details h5 span {
	font-size: 12px;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.8);
}

.expenseInfo .details .rate {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.expenseInfo .details .rate .chart {
	position: relative;
	width: 76px;
	height: 76px;
	margin-right: 15px;
	/* width: 72px;
	height: 72px;
	margin-right: 20px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.2); */
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
}

.expenseInfo .details .rate .chart div {
	width: 100%;
	height: 100%;
	transform: rotateZ(-90deg);
	transform-origin: center;
}

.expenseInfo .details .rate .chart img {
	width: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}